import React, { Component} from 'react';
import {AddShopCar} from '../../Action/auth';
import ChangeNum from '../OrderManage/ChangeNum'

export default class OrderPopUp extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            value:1,
            modalNav:true
        };
    }

    componentWillReceiveProps(newProps){
        console.log('newProps',newProps.isShow)
        this.setState({modalNav:true})
    }

    //数量减
    minusNum(){
        if(this.state.value === 1){

        }else {
            this.setState({value:--this.state.value});
        }
    }

    //数量加
    addNum(){
        this.setState({value:++this.state.value});
    }

    handleChange() {
        this.setState({value:this.state.value});
    }

    async addShopCar(){
        const {updateAccount} = this.props
        await AddShopCar(this.props.id,'',this.state.value)
            .then(res=>{
                this.props.closePopUp()
                updateAccount()
            })
            .catch(err=>{
                console.warn('添加购物车失败',err)
            })
    }

    changestate(value){
        this.setState({value:value})
        console.log('得到的value',value)
    }
    render(){
        const {closePopUp,name,image,params,boxParams,price,isShow} = this.props
        return(
            <div className="modalNav pa width100 flex flex-v" style={{zIndex:100}}>
                <div
                    className="shadowNav flex-1"
                    onClick={closePopUp}
                ></div>
                <div className="bgk_fff mt1">
                    <div className="flex paddinglr1">
                        <div style={{width:40,height:40}}>
                            <img src={image} alt=""/>
                        </div>
                        <div className="ml1 flex flex-align-center ">
                            <div className="f14 color6">{name}</div>
                        </div>
                    </div>
                    <div className="flex flex-align-center paddinglr1" >
                        <span className="font14 color6">包装:</span>
                        <div className="ml1">
                            <span
                                className="di mr10"
                            >
                                <input
                                    type="radio"
                                    className="chooseColor"
                                    id='index'
                                />
                                <label htmlFor='index'>{params}</label>
                            </span>
                        </div>
                    </div>
                    <div className="flex flex-align-center bgk_gray paddinglr1" >
                        <span className="font14 color6">规格:</span>
                        <div className="ml1">
                            <span
                                className="di mr10"
                            >
                                <input
                                    type="radio"
                                    className="chooseColor"
                                    id='index'
                                />
                                <label htmlFor='index'>{boxParams}</label>
                            </span>
                        </div>
                    </div>
                    <div
                        style={{paddingTop:5,paddingBottom:5}}
                    >
                        <ChangeNum
                            num = {1}
                            changeStatus = {(value)=>this.changestate(value)}
                            showAccount = {true}
                            currentPrice = {price}
                        />
                    </div>
                </div>
                <div
                    className="bgk_lv tc colorfff"
                    style={{height:40,lineHeight:'40px'}}
                    onClick = {()=>this.addShopCar()}
                >
                    加入购物车
                </div>
            </div>
        )
    }

}